<template>
    <div class="order-detail">

        <div id="content">
            <cube-scroll>
                <!--S订单状态-->
                <div id="status">
                    <template v-if="data.status === '1'"><i class="iconfont icon-daifahuo1"></i> 待发货</template>
                    <template v-else-if="data.status === '2'"><i class="iconfont icon-daifahuo1"></i> 已发货</template>
                    <template v-else-if="data.status === '3'"><i class="iconfont icon-daifahuo1"></i> 完成</template>
                    <template v-else><i class="cubeic-close"></i> 已取消</template>
                </div>
                <!--E订单状态-->

                <!--S收货地址-->
                <div id="address">
                    <p>{{data.take_name}} {{data.take_phone}}</p>
                    <p>地址:{{data.address}}</p>
                </div>
                <!--E收货地址-->

                <!--S商品展示-->
                <div id="goods">
                    <img class="cover" :src="data.cover" />
                    <p class="name">{{data.name}}</p>
                    <p class="price">{{setting.currency_name}}：{{data.price}}</p>
                    <p class="number">数量：{{data.number}}</p>
                </div>
                <!--E商品展示-->

                <!--S订单相关-->
                <div id="order">
                    <p>订单编号：<span>{{order_id}}</span></p>
                    <p>下单时间：<span>{{data.create_time}}</span></p>
                    <p>订单消耗{{setting.currency_name}}：<span>{{data.sum}}</span></p>
                </div>
                <!--E订单相关-->

                <!--S确认收货-->
                <cube-button class="confirm-take" v-if="data.status === '2'" @click="confirmTake">确认收货</cube-button>
                <!--E确认收货-->

            </cube-scroll>
        </div>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    export default {
        name: "order-detail",
        data(){
          return {
              order_id:"",  //订单号
              data:{}  //订单数据
          }
        },
        computed:{
            ...mapState({
                setting:"setting"
            })
        },
        created() {
            let {order_id} = this.$route.params;
            this.order_id = order_id;
            this.getData();
        },
        methods:{
            /**
             * 获取数据
             */
            getData(){
                this.$url("order/findOneApp",{
                    order_id:this.order_id
                })
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.data = res.data.data;
                    }
                });
            },
            /**
             * 确认收货
             */
            confirmTake(){
                this.$createDialog({
                    type: 'confirm',
                    content: '确认收货吗？',
                    icon: 'cubeic-alert',
                    onConfirm:()=>{
                        this.changeStatus(3);
                    }
                }).show();
            },
            /**
             * 修改订单状态
             */
            changeStatus(status){
                this.$url("order/changeStatus",{
                    order_id:this.order_id,
                    status
                })
                .then((res)=>{
                    if(res.data.status === "success"){
                        this.getData();
                    }else{
                        this.$createToast({
                            time: 1500,
                            txt: '操作失败',
                            type:'error'
                        }).show();
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less" src="./orderDetail.less"></style>